<template>
	<view class="template-about">
		<view class="top-backgroup">
			<image src='../../static/home.png' mode='' class='backgroud-image'></image>
		</view>
		<view class="user-info" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
			<image class="user-img" src="../../static/user.png"></image>
			<view class="user">
				<view class="uesr-name">{{vuex_user.name}}</view>
				<view class="uesr-phone">{{vuex_user.mobile}}</view>
			</view>
			<view class="follow" @click="followList">
				<view class="follow-num">{{followtotal}}</view>
				<view class="follow-text">关注</view>
			</view>
		</view>
		<view class="user-list">
			<view class="user-title">
				<image class="ut-icon" src="../../static/yuyue.png"></image>
				<view class="title-text">我的预约</view>
				<view class="title-left" @click="navigateToMyLive">全部<text class="tn-icon-right"></text></view>
			</view>
			<view class="dala-list">
				<view class="list-info" v-for="(item,index) in appointmentList" :key="index" @click="watchLive(item)">
					<image class="data-img" mode="aspectFit" :src="item.livepic"></image>
					<view
						:class="item.liveStatus =='1'?'status':item.liveStatus =='0'?'status status-active':'status status-end'">
						<image class="status-icon" src="../../static/zhibo.png"></image>{{item.liveStatus =='1'?'未开始':item.liveStatus =='0'?'直播中':'已结束'}}
					</view>
					<view class="list-title">{{item.livetitle}}</view>
				</view>
				<tn-empty style="margin: auto;" v-if="appointmentList.length ===0" mode="list"></tn-empty>
			</view>
		</view>
		<view class="user-list">
			<view class="user-title">
				<image class="ut-icon" src="../../static/shoucang.png"></image>
				<view class="title-text">我的收藏</view>
				<view class="title-left" @click="collect">全部<text class="tn-icon-right"></text></view>
			</view>
			<view class="dala-list">
				<view class="list-info" v-for="(item,index) in collectList" :key="index" @click="details(item)">
					<image class="data-img" mode="aspectFit"  :src="item.coverImage"></image>
					<view class="list-title">{{item.title}}</view>
				</view>
				<tn-empty style="margin: auto;" v-if="collectList.length ===0" mode="favor"></tn-empty>
			</view>
		</view>
		<view class="user-list">
			<view class="user-title">
				<image class="ut-icon" src="../../static/lishi.png"></image>
				<view class="title-text">观看历史</view>
				<view class="title-left" @click="navigateToMyHistory">全部<text class="tn-icon-right"></text></view>
			</view>
			<view class="dala-list">
				<view class="list-info" v-for="(item,index) in historyList" :key="index" @click="historyDetails(item)">
					<image class="data-img" mode="aspectFit"  :src="item.coverImage"></image>
					<view class="list-title">{{item.title}}</view>
				</view>
				<tn-empty style="margin: auto;" v-if="historyList.length ===0" mode="history"></tn-empty>
			</view>
		</view>
		<view class="update-box">
			<view class="title">最近更新</view>
			<view class="update-list"  v-for="(item,index) in updateList" :key="index" @click="experInfo(item.id)">
				<!-- doc-liveing -->
				<view class="doc-left">
					<image class="doc-img" :src="item.avatar"></image>
					<!-- <view class="live-active">直播中</view> -->
				</view>
				<view class="doc-info">
					<view class="doc-name">{{item.name}}<apsn style="font-size: 24rpx;color: #999999;margin-left: 10rpx;">{{item.department}}</apsn></view>
					<view style="font-size: 24rpx;color: #999999;">{{item.hospital}}</view>
				</view>
				<view class="doc-btn">查看更新</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {
		reservationLive,
		getContentsByUser,
		getCollectByUser,
		getReservationLiveByUserId,
		getExpertByUserId,
		getRecentExpertByUser
	} from '@/util/index.js'
	export default {
		name: 'user',
		data() {
			return {
				appointmentList: [],
				collectList: [],
				historyList: [],
				followtotal: '',
				updateList:[]
			}
		},
		mounted() {
			this.getAppointment()
			this.getCollectList()
			this.getHistoryList()
			this.getFollowList()
			this.getUpdateList()
		},

		methods: {
			getAppointment() {
				getReservationLiveByUserId({
					page: 1,
					limit: 3,
				}).then((res) => {
					this.appointmentList = res.list
				})
			},
			getCollectList() {
				getCollectByUser({
					page: 1,
					limit: 3,
					selectType: '1'
				}).then((res) => {
					this.collectList = res.list
				})

			},
			getHistoryList() {
				getContentsByUser({
					page: 1,
					limit: 3,
					selectType: '0'
				}).then((res) => {
					this.historyList = res.list
				})
			},
			getFollowList() {
				getExpertByUserId({
					page: 1,
					limit: 1,
				}).then((res) => {
					this.followtotal = res.total
				}).catch(() => {})
			},
			getUpdateList() {
				getRecentExpertByUser({
					page: 1,
					limit: 20,
				}).then((res) => {
					this.updateList = res.list
				}).catch(() => {})
			},
			details(v) {
				let url;
				if(v.type=='0'){
					switch (v.contentType) { //0:图文,1视频,2:轮播图
						case '0':
							url = `../../articleVideo/Ti-details/Ti-details?id=${v.id}`
							break;
						case '1':
							url = `../../articleVideo/video-details/video-details?id=${v.id}`
							break;
						default:
							url = `../../articleVideo/swiper-details/swiper-details?id=${v.id}`
							break;
					}
				}else{
					url = `../../articleVideo/live-video/live-video?id=${v.id}&liveStatus=${v.liveStatus}`
				}
				uni.navigateTo({
					url: url
				})
			},
			historyDetails(v) {
				let url;
				switch (v.contentType) { //0:图文,1视频,2:轮播图
					case '0':
						url = `../../articleVideo/Ti-details/Ti-details?id=${v.id}`
						break;
					case '1':
						url = `../../articleVideo/video-details/video-details?id=${v.id}`
						break;
					default:
						url = `../../articleVideo/swiper-details/swiper-details?id=${v.id}`
						break;
				}
				uni.navigateTo({
					url: url
				})
			},
			experInfo(id){
				uni.navigateTo({
					url: `../../templatePage/expert-info/expert-info?id=${id}`
				})
			},
			login() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			collect() {
				uni.navigateTo({
					url: '/templatePage/my-collect/my-collect'
				})
			},
			followList() {
				wx.navigateToMiniProgram({
					appId: "wxb173aba2842c1438",
					path: `pages/index/indexThirdApp?doctorId=359&deptId=105&sign=f0e67ddbceba406f6614085ff90a5022&type=internetClinic`,
					envVersion: "release"
				})
				// uni.navigateTo({
				// 	url: '/templatePage/my-follow/my-follow'
				// })
			},
			navigateToMyHistory() {
				uni.navigateTo({
					url: '/myInfo/myhistory/myhistory'
				})
			},
			navigateToMyLive() {
				uni.navigateTo({
					url: '/myInfo/mylive/mylive'
				})
			},
			watchLive(item) {
				if (item.liveStatus == '1') {
					uni.showToast({
						title: '直播未开始，请耐心等待...',
						icon: 'none'
					})
					return
				}
				uni.navigateTo({
					url: `../../articleVideo/live-video/live-video?id=${item.id}&liveStatus=${item.liveStatus}`
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/static/css/templatePage/custom_nav_bar.scss';

	.template-about {
		background: #F5F5F5;
		min-height: 100vh;
		padding-bottom: 50rpx;
	}

	/* 顶部背景图 start */
	.top-backgroup {
		height: 800rpx;
		position: relative;
		z-index: 0;

		.backgroud-image {
			width: 100%;
			height: 800rpx;
			// z-index: -1;
		}
	}

	.user-info {
		width: 710rpx;
		margin: -800rpx auto 0;
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		position: relative;

		.user-img {
			width: 116rpx;
			height: 116rpx;
			border-radius: 50%;
		}

		.user {
			flex: 1;
			padding-left: 20rpx;
		}

		.uesr-phone {
			font-size: 24rpx;
			margin-top: 10rpx;
			color: #999999;
		}

		.uesr-name {
			font-size: 32rpx;
			color: #333333;
		}

		.follow {
			width: 100rpx;

			.follow-num {
				font-size: 36rpx;
				color: #333333;
				text-align: center;
			}

			.follow-text {
				font-size: 24rpx;
				color: #999999;
				text-align: center;
			}
		}
	}

	.user-list {
		width: 710rpx;
		padding: 24rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin: auto;
		position: relative;
		margin-top: 30rpx;
	}

	.user-title {
		width: 100%;
		display: flex;
		align-items: center;
		margin-bottom: 25rpx;

		.ut-icon {
			width: 35rpx;
			height: 35rpx;
			margin-right: 5rpx;
		}

		.title-text {
			font-weight: 600;
			font-size: 32rpx;
			color: #333333;
			flex: 1;
		}

		.title-left {
			font-size: 24rpx;
			color: #666666;
			display: flex;
			align-items: center;
		}
	}

	.dala-list {
		display: flex;
		// align-items: center;
		justify-content: flex-start;
		
		.list-info {
			width: 210rpx;
			margin-right: 16rpx;
			position: relative;
			
			.data-img {
				width: 210rpx;
				height: 112rpx;
				background-color: #FFFFFF;
			}

			.status {
				position: absolute;
				top: 8rpx;
				left: 8rpx;
				background: #F8B858;
				border-radius: 0 17rpx 17rpx 17rpx;
				font-size: 16rpx;
				color: #FFFFFF;
				width: 106rpx;
				height: 34rpx;
				display: flex;
				align-items: center;
				padding: 0 10rpx;
				.status-icon {
					width: 30rpx;
					height: 30rpx;
					margin-right: 4rpx;
				}
			}

			.status-active {
				background: #00C8C8;
			}

			.status-end {
				background: #9b9b9b;
			}

			.list-title {
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
				// text-overflow: ellipsis;
				overflow: hidden;
				// white-space: nowrap;
				width: 100%;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				line-height: 1.5;
				max-height: 2.8em;
				display: -webkit-box;
			}
		}
	}
	.update-box{
		width: 710rpx;
		margin: auto;
		.title {
			width: 100%;
			line-height: 80rpx;
			font-weight: bold;
			color: #666666;
			font-size: 26rpx;
		}
		.update-list{
			width: 100%;
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			.doc-left{
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				// position: relative;
				overflow: hidden;
				flex: 0 0 100rpx;
				.doc-img{
					width: 100%;
					height: 100%;
				}
				// .live-active{
				// 	width: 82rpx;
				// 	height: 40rpx;
				// 	background: #EB4869;
				// 	font-size: 24rpx;
				// 	border-radius: 8rpx 8rpx 8rpx 8rpx;
				// 	position: absolute;
				// 	bottom: -15rpx;
				// 	left: 8rpx;
				// 	text-align: center;
				// 	color: #ffffff;
				// }
			}
			.doc-liveing{
				border: 4rpx solid #EB4869;
			}
			.doc-info{
				flex: 1;
				margin-left: 20rpx;
				.doc-name{
					font-weight: 500;
					font-size: 32rpx;
					color: #333333;
				}
			}
			.doc-btn{
				width: 128rpx;
				height: 40rpx;
				border-radius: 80rpx 80rpx 80rpx 80rpx;
				border: 2rpx solid #00C8C8;
				flex: 0 0 128rpx;
				text-align: center;
				line-height: 40rpx;
				font-size: 24rpx;
				color: #00C8C8;
			}
		}
	}
	
</style>
